<template>
  <div class="vip">
    <nav-top title="我的会员" :goback="true"></nav-top>
    <div class="top">
      <div class="current-vip">
        <img :src="active.icon" />
        <p>{{ active.name }}</p>
        <div class="vip-icon">
          <div>
            <img src="/static/icon/vip/vip-no.png" />
            <div class="icon-round"></div>
            <div class="active" v-if="active.index===0"></div>
          </div>
          <div>
            <img src="/static/icon/vip/vip-normal.png" />
            <div class="icon-round"></div>
            <div class="active" v-if="active.index===1"></div>
          </div>
          <div>
            <img src="/static/icon/vip/vip-gold.png" />
            <div class="icon-round"></div>
            <div class="active" v-if="active.index===2"></div>
          </div>
          <div>
            <img src="/static/icon/vip/vip-platinum.png" />
            <div class="icon-round"></div>
            <div class="active" v-if="active.index===3"></div>
          </div>
        </div>
      </div>
      <div v-if="active.index===0">
        <div class="vip-text">花费998港币成为一年普通会员</div>
      </div>
      <div v-else-if="active.index===1">
        <div class="vip-text">
          当前已招募
          <span>{{ alreadyCount }}</span>
          名会员，再招募
          <span>{{ needCount }}</span>
          名会员可晋升金卡会员
        </div>
        <div class="vip-date">
          会员剩余
          <span>{{ dateSum }}</span>
          天到期
        </div>
      </div>
      <div v-else-if="active.index===2">
        <div class="vip-text">
          当前已招募
          <span>{{ alreadyCount }}</span>
          名会员，再招募
          <span>{{ needCount }}</span>
          名会员可晋升白金会员
        </div>
        <div class="vip-date">
          会员剩余
          <span>{{ dateSum }}</span>
          天到期
        </div>
      </div>
      <div v-else-if="active.index===3">
        <div class="vip-text">已是最高级会员，到期续费可维持会员等级</div>
        <div class="vip-date">
          会员剩余
          <span>{{ dateSum }}</span>
          天到期
        </div>
      </div>
    </div>
    <div class="vip-info">
      <div class="vip-info-item">
        <img src="/static/icon/vip/ask.png" />
        <p class="info-name">线上全科医生咨询导医</p>
        <p class="info-price">{{ active.priceText.ask }}</p>
      </div>
      <div class="vip-info-item">
        <img src="/static/icon/vip/specialist.png" />
        <p class="info-name">医院专科预约</p>
        <p class="info-price">{{ active.priceText.specialist }}</p>
      </div>
      <div class="vip-info-item">
        <img src="/static/icon/vip/underwriting.png" />
        <p class="info-name">人工核保查询</p>
        <p class="info-price">{{ active.priceText.underwriting }}</p>
      </div>
      <div class="vip-info-item">
        <img src="/static/icon/vip/vaccine.png" />
        <p class="info-name">HPV疫苗</p>
        <p class="info-price">{{ active.priceText.vaccine }}</p>
      </div>
      <div class="vip-info-item">
        <img src="/static/icon/vip/examination.png" />
        <p class="info-name">各类体检</p>
        <p class="info-price">{{ active.priceText.examination }}</p>
      </div>
      <div class="vip-info-item">
        <img src="/static/icon/vip/cosmetic.png" />
        <p class="info-name">医美项目</p>
        <p class="info-price">{{ active.priceText.cosmetic }}</p>
      </div>
      <div class="vip-info-item">
        <img src="/static/icon/vip/commission.png" />
        <p class="info-name">佣金</p>
        <p class="info-price">{{ active.priceText.commission }}</p>
      </div>
      <div class="vip-info-item">
        <img src="/static/icon/vip/allowance.png" />
        <p class="info-name">津贴</p>
        <p class="info-price">{{ active.priceText.allowance }}</p>
      </div>
      <div class="vip-info-item">
        <img src="/static/icon/vip/integral.png" />
        <p class="info-name">积分</p>
        <p class="info-price">{{ active.priceText.integral }}</p>
      </div>
      <div class="vip-info-item">
        <img src="/static/icon/vip/how-to-vip.png" />
        <p class="info-name">如何成为</p>
        <p class="info-price">{{ active.priceText.howTo }}</p>
      </div>
    </div>
    <div class="remark">注：会员有效期为一年，会员从属关系在上级介绍人保持会员身份的情况下长期有效。但当下级会员成长级别超过上级后，上级不再享有下级津贴。</div>
    <van-button class="vip-btn" type="primary" size="large">成为会员</van-button>
  </div>
</template>

<script>
import NavTop from "@/components/nav/navBar";

export default {
  components: {
    NavTop
  },
  data() {
    return {
      activeIndex: 3,
      alreadyCount: 10,
      needCount: 23,
      dateSum: 234,
      active: {
        index: 0,
        name: "非会员",
        nextName: "",
        icon: "/static/icon/vip/vip-no.png",
        priceText: {
          ask: "120港币/次",
          specialist: "50港币/次",
          underwriting: "50港币/次",
          vaccine: "7800港币",
          examination: "相同或低于市场价",
          cosmetic: "相同或低于市场价",
          commission: "无",
          allowance: "无",
          integral: "无",
          howTo: "注册即可"
        }
      },
      vipList: [
        {
          index: 0,
          name: "非会员",
          nextName: "",
          icon: "/static/icon/vip/vip-no.png",
          priceText: {
            ask: "120港币/次",
            specialist: "50港币/次",
            underwriting: "50港币/次",
            vaccine: "7800港币",
            examination: "相同或低于市场价",
            cosmetic: "相同或低于市场价",
            commission: "无",
            allowance: "无",
            integral: "无",
            howTo: "注册即可"
          }
        },
        {
          index: 1,
          name: "普通会员",
          icon: "/static/icon/vip/vip-normal.png",
          priceText: {
            ask: "5次免费次数\n80港币/次",
            specialist: "10次免费次数\n30港币/次",
            underwriting: "10次免费次数\n30港币/次",
            vaccine: "10%折扣",
            examination: "10%折扣",
            cosmetic: "10%折扣",
            commission: "推荐非会员用户消费额10%",
            allowance: "下属会员佣金的10%",
            integral: "积分1：1获得\n100积分=1元",
            howTo: "998港币/年"
          }
        },
        {
          index: 2,
          name: "金卡会员",
          icon: "/static/icon/vip/vip-gold.png",
          priceText: {
            ask: "10次免费次数\n80港币/次",
            specialist: "15次免费次数\n30港币/次",
            underwriting: "15次免费次数\n30港币/次",
            vaccine: "11%折扣",
            examination: "11%折扣",
            cosmetic: "11%折扣",
            commission: "推荐非会员用户消费额13%",
            allowance: "推荐非会员用户消费额13%",
            integral: "积分1：1获得\n100积分=1元",
            howTo: "成为会员且拥有50名下属会员"
          }
        },
        {
          index: 3,
          name: "白金会员",
          icon: "/static/icon/vip/vip-platinum.png",
          priceText: {
            ask: "10次免费次数\n80港币/次",
            specialist: "20次免费次数\n30港币/次",
            underwriting: "20次免费次数\n30港币/次",
            vaccine: "12%折扣",
            examination: "12%折扣",
            cosmetic: "12%折扣",
            commission: "推荐非会员用户消费额15%",
            allowance: "下属会员佣金的50%",
            integral: "积分1：1获得\n100积分=1元",
            howTo: "成为会员且拥有100名下属会员"
          }
        }
      ]
    };
  },
  mounted() {
    for (var item of this.vipList)
      if (item.index === this.activeIndex) this.active = item;
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.vip {
  overflow: hidden;
  overflow-y: auto;
  margin-top: 42px;
  .top {
    width: 320px;
    height: 218px;
    background-color: #14b05c;
    padding: 0 10px;
    div {
      clear: both;
    }
    .current-vip {
      width: 300px;
      text-align: center;
      position: relative;
      > img {
        width: 61px;
        height: 72px;
        margin-top: 20px;
      }
      > p {
        position: absolute;
        width: 280px;
        top: 97px;
        margin: 6px 10px 0 10px;
        padding-bottom: 35px;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 1em;
        border-bottom: 1px solid #ffffff;
      }
      .vip-icon {
        position: relative;
        margin-top: 35px;
        height: 62px;
        div {
          clear: none;
          float: left;
          margin-right: 44px;
          position: relative;
          .icon-round {
            position: absolute;
            top: 0;
            left: -1px;
            width: 40px;
            height: 40px;
            border: 1px solid #ffffff;
            border-radius: 50%;
          }
        }
        img {
          width: 31px;
          height: 37px;
          padding: 2px 4.5px;
          background-color: #14b05c;
          z-index: 2;
        }
        div:last-child {
          margin-right: 0;
        }
        .active {
          content: "";
          width: 12px;
          height: 12px;
          background-color: #14b05c;
          position: absolute;
          top: 80px;
          left: 14px;
          transform: rotate(45deg);
          -ms-transform: rotate(45deg); /* Internet Explorer */
          -moz-transform: rotate(45deg); /* Firefox */
          -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
          -o-transform: rotate(45deg); /* Opera */
          z-index: -1;
        }
      }
    }
    .vip-text {
      width: 300px;
      font-size: 9px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 1em;
      span {
        font-size: 11px;
        font-weight: bold;
      }
    }
    .vip-date {
      padding-top: 3px;
      width: 300px;
      text-align: right;
      font-size: 9px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 1em;
      span {
        font-size: 11px;
        font-weight: bold;
      }
    }
  }
  .vip-info {
    padding: 11px 0 22px 25px;
    .vip-info-item {
      height: 63px;
      clear: both;
      img {
        margin-top: 21px;
        float: left;
        width: 42px;
        height: 42px;
      }
      .info-name {
        float: left;
        margin: 30px 0 0 19px;
        width: 87px;
        font-size: 13px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 15px;
      }
      .info-price {
        white-space: pre-wrap;
        float: left;
        margin: 30px 0 0 35px;
        width: 98px;
        font-size: 13px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 15px;
      }
    }
  }
  .remark {
    font-size: 11px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 15px;
    width: 291px;
    margin: 0 auto;
  }
  .vip-btn {
    background-color: #06a44f;
    color: #ffffff;
    margin-top: 33px;
    height: 43px;
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 1em;
  }
}
</style>
